<template>
  <div>
    <Appheader :parentToChild="ymname"></Appheader>
    <div class="content" v-loading="loading">
      <div class="zixun_main"> 
        <div class="title">{{info.title}}</div>
        <div class="creattime">{{info.createuser}}&nbsp;&nbsp;{{info.createtime}}</div>
        <img :src="info.photo" alt class="phott" />
        <div class="zixun_content" v-html="info.content"></div>
      </div>
      <div class="tui_zixun">
        <div class="tui_line flex">
          <!-- <p class="line"></p> -->
          推荐新闻
        </div>
        <ul class="list_ul">
          <li class="list_li" v-for="(list,index) in listarry" :key="index">
            <img :src="list.photo" alt />
            <div class="list_li_div">
              <div class="li_div_a">
                <div class="hidden">{{list.title}}</div>
                <!-- <p>{{list.createtime}}</p> -->
              </div>
              <div class="li_div_b hidden3" v-html="list.content.slice(0,90)"></div>
              <div class="li_div_c">
                <p>{{list.createtime}}</p>
                <div @click="see_more(list.id)">了解更多</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "../pindaoye/headers";
import Appfooter from "../footer";
import { formationinfo, formationtuijian } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      ymname: "艺考资讯",
      id: "",
      loading: true,
      info: "",
      listarry: []
    };
  },
  computed: {},
  created() {
   
  },
  mounted() {
    this.id = this.$route.params.id || sessionStorage.getItem("school_id");
    sessionStorage.setItem("school_id", this.id);
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        id: this.id
      };
      formationinfo(this.qs(msg))
        .then(res => {
          //   console.log(res);
          this.info = res.data.ykInformation;
          this.loading = false;
        })
        .catch(e => {});
      formationtuijian(this.qs(msg))
        .then(res => {
          //   console.log(res);
          this.listarry = res.data.ykInformations;
        })
        .catch(e => {});
    },
    //查看更多
    see_more(list_id) {
      this.id = list_id;
      this.post();
      this.loading = true;
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.content {
  width: 1171px;
  margin: 0 auto;
  
}
.zixun_main{
  background: #363640;
  padding:20px;
  box-sizing: border-box;
}
.title {
  margin-top: 27px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
  text-align: center;
}
.creattime {
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  color: #a9abb8;
}
.tui_zixun {
  margin-top: 20px;
  background: #363640;
  padding:20px;
  box-sizing: border-box;
}
.zixun_content {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  color: #aaacb8;
  line-height: 27px;
}
.line {
  width: 4px;
  height: 23px;
  background: rgba(216, 20, 23, 1);
  margin-left: 2px;
  margin-right: 6px;
}
.tui_line {
  font-size: 24px;
  color: #c9a253;
}
.phott {
  width: 400px;
  height: auto;
  margin: 0 auto;
  margin-top: 10px;
}
.list_li {
  padding: 38px 75px 24px 8px;
  box-sizing: border-box;
  display: flex;
}
.list_li > img {
  width: 284px;
  height: 165px;
  margin-right: 35px;
}
.li_div_a {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.li_div_a > div {
  width: 580px;
  font-size: 18px;
  color: #fff;
}
.li_div_a > p {
  font-size: 14px;
  color: #adafbc;
}
.li_div_b {
  margin-top: 13px;
  font-size: 14px;
  color: #adafbc;
  line-height: 26px;
  width: 795px;
}
.li_div_c {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}
.li_div_c p{
  color: #adafbc;
  font-size: 14px;
}
.li_div_c > div {
  width: 99px;
  height: 30px;
  border: 1px solid #c7a750;
  font-size: 14px;
  color: #c7a750;
  border-radius: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.list_li:hover {
  /* border-top: 1px solid #d81417;
  border-bottom: 1px solid #d81417; */
}
</style>
